<template>
  <view class="item-view br-8 mb-12" @click="goDetail">
    <view class="header pa-12 disFlxJS">
      <view class="flex-1 mr-10 disFlxAC">
        <TImage
          class="flex-shrink-0 mr-4"
          :src="avatarUrl"
          width="48rpx"
          height="48rpx"
          border-radius="50%"
        />
        <text class="fz-12 font-bold default-color flex-1 ov-1">
          <text>{{ userName }}</text>
          <text v-if="companyPositionName" class="mx-2">·</text>
          <text v-if="companyPositionName">{{ companyPositionName }}</text>
        </text>
      </view>
      <StatusTag :status="status" />
    </view>
    <view class="pa-12">
      <view class="fz-14 default-color mb-8">
        <text>{{ timeLabel }}{{ applicationTime }}</text>
      </view>
      <view v-if="showDataInfo" class="pa-12 disFlxAC br-8" style="background-color: #f2f3f5">
        <TImage
          v-if="boType === BoTypeEnum.Supply"
          class="flex-shrink-0 mr-4"
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/gong.png"
          width="40rpx"
          height="40rpx"
        />
        <TImage
          v-else
          class="flex-shrink-0 mr-4"
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/xu.png"
          width="40rpx"
          height="40rpx"
        />
        <text class="fz-14 default-color flex-1 ov-1">{{ title }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { BoTypeEnum, IntentionStatusEnum } from '@/enums/businessOpportunitiesEnum';
  import { propTypes } from '@/utils/propTypes';
  import { type PropType } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import { navigateTo } from '@/router';
  import StatusTag from './StatusTag.vue';

  const props = defineProps({
    id: propTypes.number,
    /** 头像 */
    avatarUrl: propTypes.string,
    /** 姓名 */
    userName: propTypes.string,
    /** 职务 */
    companyPositionName: propTypes.string,
    /** 意向状态 */
    status: Number as PropType<IntentionStatusEnum>,
    /** 是否显示供需信息 */
    showDataInfo: propTypes.bool.def(true),
    /** 申请时间 */
    applicationTime: propTypes.string,
    /** 供需类型 */
    boType: Number as PropType<BoTypeEnum>,
    /** 供需标题 */
    title: propTypes.string,
    timeLabel: propTypes.string.def('发送时间：')
  });

  function goDetail() {
    navigateTo({
      name: 'intentionDetails',
      options: {
        id: props.id,
        type: 'received'
      },
    });
  }
</script>

<style lang="scss" scoped>
  .item-view {
    background-color: #fff;
    .header {
      border-bottom: 1px solid #ebedf0;
    }
  }
</style>
